<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Loading JSON with jQuery</title>
	<script src="jquery.min.js"></script>
</head>
<body>
	<p><strong>Ajax parsed JSON:</strong></p>
	<div id="generated_content">&nbsp;</div>
	<script>
		$(document).ready(function() {
			$.getJSON('json_example.php', function(data) {
				$.each(data, function(continent, animals) {
					var message = '<strong>' + continent + '</strong><br />';
					for (var j = 0; j < animals.length; j++) {
						message += animals[j] + ', ';
					}
					//移除最后的空格
					message = message.trim();
					message = message.substring(0, message.length - 1);
					$('#generated_content').append('<p>' + message + '</p>');
				});
			});
		});
	</script>
</body>
</html>